  <!--这个例子是一个演示的文件，如需使用组件，-->
<!--需要将该文件的代码复制修改，写入common文件夹下的mainArea.vue-->


<template>
  <el-main>
    <!--这是table的组件模块-->
    <i-table :list="list"
             @handleSelectionChange="handleSelectionChange"
             :options="options"
             :columns="columns"
             :operates="operates"
             :title="title" >


      <!--在此处添加下面的按钮，为表格操作按钮--><!--！！！！！！！！！新增的-->
      <el-button slot="checkSlot" type="info" size="mini" @click="checkClick">查询</el-button><!--查询按钮-->
      <el-button slot="editSlot" type="primary" size="mini" @click="editClick">编辑</el-button><!--编辑按钮-->
      <el-button slot="disableSlot" type="danger" size="mini" @click="delClick">删除</el-button><!--删除按钮-->

    </i-table>
  </el-main>
</template>

<script>
  import iTable from '../TX/tableComponent'//引入table组件

  export default {
    name: 'mainArea',
    components: {
      iTable
    },
    //表格数据的操作方法
    data() {
      return {
        //表格上部标签名称的传入
        title:'售后退款',
        // table数据传入
        list: [],
        // table 的参数
        options: {
          stripe: true, // 是否为斑马纹 table
          loading: false, // 是否添加表格loading加载动画
          highlightCurrentRow: true, // 是否支持当前行高亮显示
          mutiSelect: true, // 是否支持列表项选中功能
        },

        //table表头的添加与修改，需要展示的列
        columns: [
          {
            prop: 'refund_id',
            label: '退款编号',
            align: 'center',
          },
          {
            prop: 'order_id',
            label: '订单编号',
            align: 'center',
          },
          {
            prop: 'request_time',
            label: '请求时间',
            align: 'center',
          },
          {
            prop: 'request_reason',
            label: '退款原因',
            align: 'center',
          },
          {
            prop: 'handle_time',
            label: '处理时间',
            align: 'center',
          },
          {
            prop: 'handle_method',
            label: '处理方式',
            align: 'center',
          },
          {
            prop: 'refund_money',
            label: '退款金额',
            align: 'center',
          },
          {
            prop: 'state',
            label: '状态',
            align: 'center',
            render: (h, params) => {
              return h('el-tag', {
                  props: {
                    type: params.row.state === 0 ? 'success' : params.row.state === 1 ? 'info' : 'danger'
                  } // 组件的props
                },
                params.row.state === 0 ? '已退货' : params.row.state === 1 ? '未退货' : '未处理')
            }
          }
        ],

        // 列操作按钮
        operates: {
          width: 250,
          fixed: 'right',
          list: [
            {
              show: true,
            }
          ]
        }
      }
    },

    methods: {
       /*这个为表格操作按钮的点击事件*//*!--！！！！！！！！！新增的*/
      checkClick () {
        console.log("点击到了按钮1")
      },
      editClick () {
        console.log("点击到了按钮2")
      },
      delClick () {
        console.log("点击到了按钮3")
      },
      // 选中行
      handleSelectionChange(val) {
        console.log('val:', val)
      },
      // 编辑
      // handleEdit(index, row) {
      //   console.log(' index:', index)
      //   console.log(' row:', row)
      // },
      // 删除
    //   handleDel(index, row) {
    //     console.log(' index:', index)
    //     console.log(' row:', row)
    //   }
    },
    created () {
      this.$axiosx.get('/api/backGetProductRefund')
        .then((response) => {
          this.list = response.data;
          console.log(response.data)
        })
        .catch((error) => {
          console.log(error.message)
        })
    }
  }
</script>

  <style scoped lang="less">

  </style>
